// 在独立js脚本中定义比较长的回调函数
window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
        render_graph: (data) => {
            // 根据id初始化绑定图表
            var myChart = echarts.init(document.getElementById('graph-container'));

            let mockNodes = data['mock_graph_nodes']

            let mockLinks = data['mock_graph_links']

            const rawData = mockNodes.map((item) => {
                if (item.category === "关系") {
                    return {
                        ...item,
                        symbolSize: [80, 80],
                        itemStyle: {
                            normal: {
                                color: "#f4b7be",
                            },
                        }
                    };
                } else {
                    return {
                        ...item
                    };
                }
            });
            const rawLink = mockLinks.map((item) => {
                return {
                    ...item,
                    tooltip: { formatter: "关系" },
                    symbolSize: [10, 10],
                };
            });
            const option = {
                color: ["#ff575f", "#ffca56", "#00ccc1", "#4f9ef5"],
                tooltip: {
                    trigger: "item",
                    formatter: "{b}",
                },
                legend: {
                    selectedMode: "true",
                    orient: "vertical",
                    top: 10,
                    show: true,
                    data: [
                        {
                            name: "业务系统",
                        },
                        {
                            name: "数据源",
                        },
                        {
                            name: "数据库",
                        }
                    ],
                    left: 10
                },

                animationDuration: 1000,
                animationEasingUpdate: "quinticInOut",
                series: [
                    {
                        name: "",
                        type: "graph",
                        layout: "force",
                        edgeSymbol: ["none", "arrow"],
                        edgeSymbolSize: [0, 0],
                        draggable: false,
                        zoom: 1, // 数据多的情况下控制显示区域大小
                        symbolSize: [50, 50],
                        force: {
                            // 布局配置
                            repulsion: 600,
                            edgeLength: 120,
                            layoutAnimation: true,
                            friction: 0.6
                        },
                        data: rawData,
                        links: rawLink,
                        categories: [
                            {
                                name: "业务系统",
                            },
                            {
                                name: "数据源",
                            },
                            {
                                name: "数据库",
                            }
                        ],
                        roam: true, // 是否开启平移缩放
                        label: {
                            normal: {
                                show: true,
                                // position: ["125%", "100%"],
                                position: "inside",
                                color: "#fff",
                                textBorderWidth: 1,
                                formatter: "{a|{b}}",
                                rich: {
                                    a: {
                                        color: "#000",
                                        height: 0,
                                        // lineHeight: 10
                                    }
                                },
                            },
                        },
                        lineStyle: {
                            normal: {
                                color: "#000",
                                curveness: 0.3,
                                type: "solid",
                            },
                        },
                        emphasis: {
                            focus: "adjacency",
                            lineStyle: {
                                width: 5,
                            },
                        },
                    },
                ],
            };

            // 渲染
            myChart.setOption(option);
        }
    }
});